<template>
  <div style="margin: 10px;">
    <el-card>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="auto">
        <el-form-item style="margin-right: 150px;" label="一级分类" prop="categoryId1">
          <el-select :disabled="dis" v-model="category1Id" @change="changeCategory2List" placeholder="请选择一级分类" clearable>
            <el-option v-for="item in category1List" :label="item.categoryName" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right: 300px;" label="二级分类" prop="categoryId2">
          <el-select :disabled="dis" @change="setCategory2Id" v-model="category2Id" placeholder="请选择二级分类" clearable>
            <el-option v-for="item in category2List" :label="item.categoryName" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 20px;">
      <div v-show="showStatus == 0">
        <el-empty :image-size="200"></el-empty>
      </div>
      <div v-show="showStatus == 1">
        <el-table v-loading="loading" :data="activitysList">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column show-overflow-tooltip label="详情标题" align="center" prop="title" />
          <el-table-column label="浏览量" align="center" prop="viewNum" />
          <el-table-column label="操作" align="center" width="150px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="managementCommentListByDetailId(scope.row)" v-hasPermi="['contest:contest:edit']">管理评论</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="handleQuery" />
      </div>
      <div v-show="showStatus == 2">
        <el-table :data="commentList" style="width: 100%; margin-bottom: 20px;" row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
          <el-table-column type="index" label="序号" align="center" width="55">
          </el-table-column>
          <el-table-column label="编号" prop="id" align="center" width="200">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="content" label="评论内容" width="200">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="rootId" label="根评论id" width="100">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="toCommentUserId" label="所回复的目标评论的userId" width="100">
          </el-table-column>
          <el-table-column prop="userName" label="用户名称" width="150">
          </el-table-column>
          <el-table-column prop="pushTime" label="评论时间" width="250">
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="toCommentId" label="回复目标评论id" width="100">
          </el-table-column>
          <el-table-column label="操作" align="center" width="150px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="managementCommentListByDetailId(scope.row)" v-hasPermi="['contest:contest:edit']">管理评论</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="totalComment>0" :total="totalComment" :page.sync="queryParams2.page" :limit.sync="queryParams2.limit" @pagination="managementCommentListByDetailId" />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  findCategory1List,
  findCategory2List
} from "@/api/category/category";
import {
  activitySByCategoryId, findCommentListByDetailId
} from "@/api/comment/comment";
export default {
  data() {
    return {
      type: null,
      activitysList: [],
      showStatus: 0,
      category1List: [],
      category2List: [],
      category1Id: null,
      category2Id: null,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: null,
      },
      total: 0,
      dis: false,
      queryParams2: {
        page: 1,
        limit: 10,
        userName: null,
        content: null
      },
      loading: false,
      commentList: [],
      totalComment: 0,
      temporaryId: null
    }
  },
  created() {
    findCategory1List().then(res => {
      this.category1List = res.data
    })
  },
  methods: {
    //管理评论列表
    async managementCommentListByDetailId(value) {
      if (this.temporaryId == null) {
        this.temporaryId = value.id
      }
      const res = await findCommentListByDetailId(this.queryParams2.page, this.queryParams2.limit, this.type, this.temporaryId)
      console.log(res.rows);
      this.showStatus = 2
      this.commentList = res.data.rows
      this.totalComment = res.data.total
    },
    setCategory2Id(value) {
      this.queryParams.categoryId = value
      console.log(this.queryParams.categoryId);
    },
    async changeCategory2List(value) {
      console.log(value);
      this.category2Id = null
      const { categoryName: name } = this.category1List.find(item => item.id == value)
      console.log(name);
      if (name == '竞赛') {
        this.type = '0'
      } else if (name == '活动') {
        this.type = '1'
      } else {
        this.type = '2'
      }
      console.log(this.type);
      const res = await findCategory2List(value)
      this.category2List = res.data
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.dis = true
      //先清除临时Id
      this.temporaryId = null
      this.loading = true
      console.log(this.queryParams.categoryId);
      activitySByCategoryId(this.queryParams).then(res => {
        this.showStatus = 1
        this.activitysList = res.rows
        this.total = res.total
        console.log(res.rows);
        this.loading = false
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dis = false
      this.resetForm("queryForm");
      this.category1Id = null
      this.category2Id = null
      // this.handleQuery();
      this.showStatus = 0
    },

  }
}
</script>

<style>
</style>